<script setup>
import {ref} from 'vue';
import {MdEditor} from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const text = ref('Hello Editor!');

const toolbars = ['bold', 'underline', 'italic', 'strikeThrough', 'title', 'sub',
  'sup', '-', 'unorderedList', 'orderedList', 'task', '-', 'quote', 'codeRow', 'code', 'katex', '-',
  'image', 'table', 'mermaid', 'save', '=', 'revoke', 'next', 'pageFullscreen',
  'fullscreen', 'preview', 'catalog', 'github'];
</script>

<template>
  <MdEditor v-model="text" :toolbars="toolbars" height="100%"/>


</template>


<style>
.md-editor {
  height: 87vh;
  --md-bk-color: #C7EDCC;
  border-radius: 10px;
}

</style>